<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-jmeterTestCase-edit" th:object="${jmeterTestCase}">
            <input id="id" name="id" th:field="*{id}"  type="hidden">
			<input id="treeId" name="relModuleId" type="hidden" th:field="*{relModuleId}"/>

			<div class="form-group">
				<label class="col-sm-3 control-label">选择所属项目：</label>
				<div class="col-sm-8">
					<select id="relProjectId" name="relProjectId" class="form-control m-b" >
						<option value="" >请选择</option>
						<option th:each="item:${projects}" th:text="${item.projectName}" th:value="${item.projectId}" ></option>
					</select>
				</div>
			</div>


			<div class="form-group">
				<label class="col-sm-3 control-label">模块名称：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" onclick="selectModuleTree()" id="treeName" readonly="true" th:field="*{relModuleName}"/>
				</div>
			</div>


			<div class="form-group">
				<label class="col-sm-3 control-label">测试场景：</label>
				<div class="col-sm-8">
					<select id="scenario" name="scenario" class="form-control m-b">
						<option value="" >请选择</option>
						<option value="基准测试" >基准测试</option>
						<option value="负载测试">负载测试</option>
						<option value="压力测试">压力测试</option>
						<option value="容量测试">容量测试</option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">接口名称：</label>
				<div class="col-sm-8">
					<input id="interfaceName"th:field="*{interfaceName}"  name="interfaceName" class="form-control" type="text">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">测试目的：</label>
				<div class="col-sm-8">
					<input id="testPurpose"th:field="*{testPurpose}"  name="testPurpose" class="form-control" type="text">
				</div>
			</div>

			<div class="form-group">	
				<label class="col-sm-3 control-label">用例名称：</label>
				<div class="col-sm-8">
					<input id="caseName" name="caseName" th:field="*{caseName}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">总线程数：</label>
				<div class="col-sm-8">
					<input id="threadsNum" name="threadsNum" th:field="*{threadsNum}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">延迟时间(s)：</label>
				<div class="col-sm-8">
					<input id="threadsDelay" name="threadsDelay" th:field="*{threadsDelay}" class="form-control" type="text">
				</div>
			</div>

			<input type="hidden" id="scriptLocation" name="scriptLocation" class="form-control" />

			<div class="form-group">	
				<label class="col-sm-3 control-label">起始线程：</label>
				<div class="col-sm-8">
					<input id="startUserCount" name="startUserCount" th:field="*{startUserCount}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">每次增加：</label>
				<div class="col-sm-8">
					<input id="startUserBurst" name="startUserBurst" th:field="*{startUserBurst}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">运行时间（每次增加）(s)：</label>
				<div class="col-sm-8">
					<input id="startUserPeriod" name="startUserPeriod" th:field="*{startUserPeriod}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">每次停止：</label>
				<div class="col-sm-8">
					<input id="stopUserCount" name="stopUserCount" th:field="*{stopUserCount}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">运行时间（每次减少）(s)：</label>
				<div class="col-sm-8">
					<input id="stopUserPeriod" name="stopUserPeriod" th:field="*{stopUserPeriod}" class="form-control" type="text">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">压测时长(s)：</label>
				<div class="col-sm-8">
					<input id="flightTime" name="rampUp" th:field="*{flightTime}" class="form-control" type="text">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">启动时间(s)：</label>
				<div class="col-sm-8">
					<input id="rampUp" name="rampUp" th:field="*{rampUp}" class="form-control" type="text">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">jmx脚本：</label>
				<div class="col-sm-8">
					<input id="scriptName" name="scriptName" class="form-control" th:field="*{scriptName}" type="text">
					<div class="form-group" >
						<label style="display: inline-flex; margin-left: 15px" >
							<input type="file" name="file" id="file" >
							<input type="button" id="uploadBtn" th:value="开始上传" onclick="startUpload()">
						</label>
					</div>
				</div>
			</div>


			<div class="form-group" id="dependencyFiles">

			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">分配客户端：</label>
				<div class="col-sm-8">
					<select id="nodeIds" name="nodeIds" class="form-control m-b" multiple="multiple">
						<option th:each="node:${nodes}" th:text="${node.nodeName}" th:value="${node.id}" ></option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">前置测试用例id：</label>
				<div class="col-sm-8">
					<select id="prevCaseId" name="prevCaseId" class="form-control m-b" >
						<option value="0" >请选择</option>
						<option th:each="item:${cases}" th:text="${item.caseName}" th:value="${item.id}" ></option>
					</select>
				</div>
			</div>
		</form>
    </div>
    <div th:include="include::footer"></div>
	<script th:src="@{/ajax/libs/select/select2.js}"></script>
	<script th:inline="javascript">
		var prefix = ctx + "jmeter/jmeterTestCase";
		var modulePrefix = ctx + "testmanagmt/projectCaseModule";


		/*模块管理-新增-选择父模块树*/
		function selectModuleTree() {
			var options = {
				title: '模块选择',
				width: "380",
				url: modulePrefix + "/selectProjectCaseModuleTree/" + $("#treeId").val(),
				callBack: doSubmit
			};
			$.modal.openOptions(options);
		}



		function doSubmit(index, layero){
			var body = layer.getChildFrame('body', index);
			$("#treeId").val(body.find('#treeId').val());
			$("#treeName").val(body.find('#treeName').val());
			layer.close(index);
		}

		/*选择项目初始化模块树*/
		function initializeModuleTree() {
			$.validate.resetForm();
			$.validate.form();
			var projectId = $("#projectId").val();
			$.ajax({
				cache: true,
				type: "GET",
				url: modulePrefix + "/getModuleByProjectId/" + projectId,
				data: {},
				async: false,
				error: function (request) {
					$.modal.alertError("系统错误");
				},
				success: function (data) {
					$("#treeId").val(data.moduleId);
					$("#treeName").val(data.moduleName);
				}
			});
		}


		$("#form-jmeterTestCase-edit").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});





		//save
		function submitHandler() {
	        if ($.validate.form()) {

	        	let addfiles=[];


				$("#dependencyFiles").find(':hidden').each(function(index,item){
					let obj={};
					obj.filename=$(item).attr("filename");
					obj.fileLocation=$(item).attr("location");
					addfiles.push(obj);
				});

				let  data = $('#form-jmeterTestCase-edit').serializeObject();
				data.dependencyFiles=addfiles;

				let nodeIds = data.nodeIds;
				if(!Array.isArray(nodeIds)){
					data.nodeIdList=[];
					data.nodeIdList.push(nodeIds);
				}else {
					data.nodeIdList= data.nodeIds;
				}

				data.nodeIds=null;
				$.operate.saveJson(prefix + "/edit", JSON.stringify(data));
	        }
	    }

		/*弹出层上传Jar*/
		function uploadJar() {
			var url = prefix+"/showUploadJar";
			$.modal.open("上传Jar至客户端", url,null,null,"上传");
		}

		function startUpload() {
			var drivenfile = $('#file')[0].files[0];

			if(drivenfile==undefined){
				$.modal.msgError("请选择脚本文件");
				return;
			}

			var formData = new FormData();
			formData.append("drivenfile", drivenfile);
			$.ajax({
				url: prefix + "/uploadjmx",
				type: 'POST',
				cache: false,
				data: formData,
				processData: false,
				contentType: false,
				success: function (result) {
					if (result.code == web_status.SUCCESS) {
						$("#threadsNum").val(result.data.threadsNum);
						$("#threadsDelay").val(result.data.threadsDelay);
						$("#startUserCount").val(result.data.startUserCount);
						$("#startUserBurst").val(result.data.startUserBurst);
						$("#startUserPeriod").val(result.data.startUserPeriod);
						$("#stopUserCount").val(result.data.stopUserCount);
						$("#stopUserPeriod").val(result.data.stopUserPeriod);
						$("#flightTime").val(result.data.flightTime);
						$("#rampUp").val(result.data.rampUp);
						$("#scriptLocation").val(result.data.scriptLocation);
						$("#scriptName").val(drivenfile.name);

						let addtionFiles=result.dependencyFiles;

						let html=addtionFiles.map(file=>
								'<label class="col-sm-3 control-label">'+file.filename+':</label>\n' +
								'   <div class="col-sm-8">\n' +
								'     <div class="form-group" >\n' +
								'      <label style="display: inline-flex; margin-left: 15px" >\n' +
								'       <input type="file" id="'+file.filename+'" >\n' +
								'       <input type="button" value="开始上传" onclick="uploadJmxAddtions(event)">\n' +
								'      </label>\n' +
								'     </div>\n' +
								'    </div>'

						)

						$("#dependencyFiles").html(
								html
						)


						$.modal.msgSuccess(result.msg);
					} else {
						$.modal.msgError(result.msg);
					}
				}
			});
		}


		function uploadJmxAddtions(event ){
			let el=$(event.target);
			var file=$(event.target).prev()[0].files[0];

			if(file==undefined){
				$.modal.msgError("请选择文件");
				return;
			}

			var formData = new FormData();
			formData.append("drivenfile", file);
			formData.append("name", file.name);

			$.ajax({
				url: prefix + "/uploadJmxAddtionFiles",
				type: 'POST',
				cache: false,
				data: formData,
				processData: false,
				contentType: false,
				success: function (result) {
					if (result.code == web_status.SUCCESS) {

						el.after('<input type="hidden" filename="'+file.name+'" location="'+result.data.absolutePath+'" />')

						$.modal.msgSuccess(result.msg);
					} else {
						$.modal.msgError(result.msg);
					}
				}
			});

		}

		$(function () {


			var nodeIdsSelected = [[${jmeterTestCase.nodeIdList}]];
			$("#nodeIds").val(nodeIdsSelected).change();

			$("#prevCaseId").select2();
			$("#prevCaseId").val( [[${jmeterTestCase.prevCaseId}]]).change();

			$("#scenario").select2();
			var scenario = [[${jmeterTestCase.scenario}]];
			$("#scenario").val(scenario).change();


			$("#relProjectId").select2();
			var selectedProjectId = [[${jmeterTestCase.relProjectId}]];
			$("#relProjectId").val(selectedProjectId).change();


			var addtionFilesList = [[${jmeterTestCase.addtionFilesList}]];

			let html=addtionFilesList.map(file=>
					'<label class="col-sm-3 control-label">'+file.filename+':</label>\n' +
					'   <div class="col-sm-8">\n' +
					'     <div class="form-group" >\n' +
					'      <label style="display: inline-flex; margin-left: 15px" >\n' +
					'       <input type="file" id="'+file.filename+'" >\n' +
					'       <input type="button" value="开始上传" onclick="uploadJmxAddtions(event)">\n' +
					'      </label>\n' +
					'     </div>\n' +
					'    </div>'

			);

			$("#dependencyFiles").html(
					html
			);

		});


	</script>
</body>
</html>
